<script type="text/javascript">

    var defaultData = <?= json_encode($user_detail); ?>;
    var editMode = false;

    $(document).ready(function () {
        $("#edit_button").show();
        $("#save_button").hide();
        $("#cancel_button").hide();
        $("#form-profile").on("submit", function () {
            var pwd_old = $("#old_pwd").val();
            var pwd_old_input = $("#pwd1").val();
            var pwd_new = $("#pwd2").val();
            var confirm = $("#pwd3").val();
            // not update password
            if (pwd_old_input === "") {
                $("#pwd2").val(pwd_old);
                return true;
            }

            if (md5(pwd_old_input) !== pwd_old) {
                alert("Password lama salah!");

                return false;
            } else if (pwd_new === "") {
                alert("Password baru tidak boleh kosong!");

                return false;
            } else if (pwd_new !== confirm) {
                alert("Password tidak cocok!");

                return false;
            }
            $("#pwd2").val(md5(pwd_new));
            return true;
        });

        $("#pwd1").on("keyup", function () {
            var pwd_old = $("#old_pwd").val();
            var pwd_old_input = md5($("#pwd1").val());
            $("#div_pwd1").removeClass("has-error");
            $("#div_pwd1").removeClass("has-success");
            if (pwd_old_input !== pwd_old) {
                $("#div_pwd1").addClass("has-error");
                $("#save_button").prop("disabled", true);
                //alert("invalid!");
            } else {
                $("#div_pwd1").addClass("has-success");
                $("#save_button").prop("disabled", false);
                //alert("invalid!");
            }
        });

        $("#pwd3").on("keyup", function () {
            var pwd_new = $("#pwd2").val();
            var confirm = $("#pwd3").val();
            $("#div_pwd3").removeClass("has-error");
            $("#div_pwd2").removeClass("has-success");
            $("#div_pwd3").removeClass("has-success");
            if (confirm !== pwd_new) {
                $("#div_pwd3").addClass("has-error");
                $("#save_button").prop("disabled", true);
            } else {
                $("#div_pwd2").addClass("has-success");
                $("#div_pwd3").addClass("has-success");
                $("#save_button").prop("disabled", false);
            }

        });
    });

    function refreshState() {
        if (editMode) {
            $("#edit_button").hide();
            $("#save_button").show();
            $("#cancel_button").show();
        } else {
            $("#edit_button").show();
            $("#save_button").hide();
            $("#cancel_button").hide();
        }
    }


    function enableEdit() {
        $("#user_name").prop("readonly", false);
        $("#user_email").prop("readonly", false);
        $("#user_phone").prop("readonly", false);
        $("#user_uname").prop("readonly", false);
        $("#pwd1").prop("readonly", false);
        $("#pwd2").prop("readonly", false);
        $("#pwd3").prop("readonly", false);
        editMode = true;
        refreshState();
    }

    function cancelEdit() {
        var json = defaultData;
        $("#user_name").val(json.<?= mUser::NAME ?>);
        $("#user_name").prop("readonly", true);
        $("#user_email").val(json.<?= mUser::EMAIL ?>);
        $("#user_email").prop("readonly", true);
        $("#user_phone").val(json.<?= mUser::HP ?>);
        $("#user_phone").prop("readonly", true);
        $("#user_uname").val(json.<?= mUser::USERNAME ?>);
        $("#user_uname").prop("readonly", true);
        $("#pwd1").val("");
        $("#pwd1").prop("readonly", true);
        $("#pwd2").val("");
        $("#pwd2").prop("readonly", true);
        $("#pwd3").val("");
        $("#pwd3").prop("readonly", true);
        editMode = false;
        refreshState();
    }



    function saveEdit() {
        $("#form-profile").submit();
    }

    function save() {
        var pwd_old = $("#old_pwd_val").val();
        var pwd_old_input = md5($("#pwd_val").val());
        var pwd_new = $("#pwd2_val").val();
        var confirm = $("#pwd3_val").val();

        if (pwd_old_input === "" || pwd_new === "" || confirm === "") {
            alert("Password harus diisi!");
        } else if (pwd_old !== pwd_old_input) {
            alert("Password validasi lama salah!");
        } else if (pwd_new !== confirm) {
            alert("Password validasi baru tidak cocok!");
        } else {
            //alert("ok!");
            var id = $("#usr_id").val();
            $.ajax({
                "type": "post",
                "url": "<?= base_url() ?>user-management/role/updatePasswordValidasi",
                "data": {<?= mUser::ID ?>: id, <?= mUser::PASSWORD_VALIDATION ?>: pwd_new},
                "success": function (response) {
                    var json = JSON.parse(response);
                    if (json.status) {
                        alert("Perubahan password validasi berhasil!");
                    } else {
                        alert("Perubahan password validasi gagal!");
                    }
                    $("#passwordValModal").modal("hide");
                },
                "error": function (err) {
                    alert(err);
                    $("#passwordValModal").modal("hide");
                }
            });
        }
    }

    function _hide() {
        $('#alertMessage').hide();
    }

</script>

<div class="col-md-12">
    <div class="widget wgreen">
        <div class="widget-head">
            <div class="pull-left">Profil Pengguna</div>
            <div class="widget-icons pull-right">
                <a href="#" class="wminimize">
                    <i class="fa fa-chevron-up">
                    </i>
                </a>
                <a href="#" class="wclose">
                    <i class="fa fa-times">
                    </i>
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="widget-content" style="padding: 10px">
            <div class="col-md-12">
                <div class="col-md-10 form-group">
                    <button type="button" class="btn btn-sm btn-danger pull-right" id="cancel_button" onclick="cancelEdit()"><i class="fa fa-ban fa-fw fa-lg"></i> Batal</button>
                    <button type="button" class="btn btn-sm btn-primary pull-right" id="edit_button" onclick="enableEdit()"><i class="fa fa-pencil fa-fw fa-lg"></i> Edit Profil</button>
                    <button type="button" class="btn btn-sm btn-primary pull-right" data-toggle="modal" data-target="#passwordValModal"><i class="fa fa-pencil fa-fw fa-lg"></i>  Edit Password Validasi</button>
                </div>
                <form id="form-profile" method="post" action="<?= base_url() ?>user-management/pengguna/saveProfile">
                    <div class="form-group col-md-10">
                        <button type="submit" class="btn btn-sm btn-success pull-right" id="save_button"><i class="fa fa-save fa-fw fa-lg"></i> Simpan</button>


                    </div>
                    <div class="clearfix"></div>
                    <input type="hidden" id="user_id" name="<?= mUser::ID ?>" value="<?= $user_detail[mUser::ID] ?>" />
                    <input type="hidden" id="old_pwd" value="<?= $user_detail[mUser::PASSWORD] ?>" />
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-md-2 control-label">Nama</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="user_name" name="<?= mUser::NAME ?>" placeholder="Nama Pengguna" value="<?= $user_detail[mUser::NAME] ?>" required readonly="true"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Email</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="user_email" name="<?= mUser::EMAIL ?>" placeholder="Email Pengguna" value="<?= $user_detail[mUser::EMAIL] ?>" required readonly="true"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Handphone</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="user_phone" name="<?= mUser::HP ?>" placeholder="Telepon Pengguna" value="<?= $user_detail[mUser::HP] ?>" required readonly="true"/>
                            </div>
                        </div> 
                        <div class="form-group">
                            <label class="col-md-2 control-label">Departemen</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" value="<?= $userDepartementMap[$user_detail[mUser::DEPARTEMEN]] ?>" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Username</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="user_uname" name="<?= mUser::USERNAME ?>" placeholder="Username Pengguna" readonly="true" value="<?= $user_detail[mUser::USERNAME] ?>" required/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Password</label>
                            <div class="col-md-8"  id="div_pwd1">
                                <input type="password" class="form-control" id="pwd1" placeholder="Password Pengguna" readonly="true"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Password Baru</label>
                            <div class="col-md-8" id="div_pwd2">
                                <input type="password" class="form-control" id="pwd2" name="<?= mUser::PASSWORD ?>" placeholder="Password Baru" readonly="true" value=""/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">Konfirmasi Password</label>
                            <div class="col-md-8" id="div_pwd3">
                                <input type="password" class="form-control" id="pwd3" placeholder="Password Baru (Confirm)" readonly="true"/>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
            <div class="clearfix"></div>


            <div class="modal fade" id="passwordValModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Ubah Password</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-horizontal">
                                <input type="hidden" id="usr_id" value="<?= $user_detail[mUser::ID] ?>" name="<?= mUser::ID ?>" />
                                <input type="hidden" id="old_pwd_val" value="<?= $user_detail[mUser::PASSWORD_VALIDATION] ?>" />
                                <div class="form-group">
                                    <label class="col-md-5">Password Validasi Lama</label>
                                    <div class="col-md-7">
                                        <input type="password" class="form-control" name="" id="pwd_val" required/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-5">Password Validasi Baru</label>
                                    <div class="col-md-7">
                                        <input type="password" class="form-control" name="<?= mUser::PASSWORD_VALIDATION ?>" id="pwd2_val" required />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-5">Confirm Password Validasi Baru</label>
                                    <div class="col-md-7">
                                        <input type="password" class="form-control" name="" id="pwd3_val" required />
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-fw fa-lg fa-times"></i> Close</button>
                            <button type="button" class="btn btn-primary" onclick="save()"><i class="fa fa-fw fa-lg fa-save"></i> Simpan</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>